<template>
	<div class="detail">
		<detail-header></detail-header>
		<detail-banner :bannerImg=bannerImg
		:gallaryImgs=gallaryImgs
		:sightName = sightName
		/>
		<detail-list :categoryList=categoryList></detail-list>
	</div>
</template>
<script>
	import axios from 'axios'
	import DetailHeader from './components/header.vue'
	import DetailBanner from './components/banner.vue'
	import DetailList from './components/list.vue'
	export default{
		name:'Detail',
		components:{
			DetailHeader,
			DetailBanner,
			DetailList
		},
		mounted(){
			this.getDetailList()
		},
		data(){
			return{
				bannerImg:'',
				gallaryImgs:[],
				sightName:'',
				categoryList:[]
			}
		},
		methods:{
			getDetailList(){
				// axios.post('/api/detail.json?id=' +this.$route.params.id )
  				axios.get('/api/detail.json?id=' +this.$route.params.id)
  				.then(this.handleGetDataSucc)
			},
			handleGetDataSucc(res){
				 res = res.data
				if(res.ret&&res.data){
					console.log(res)
					console.log(res.data.sightName)
					console.log(res.data.categoryList)
					this.bannerImg = res.data.bannerImg
					this.gallaryImgs = res.data.gallaryImgs
					this.sightName = res.data.sightName
					this.categoryList = res.data.categoryList
				}
			}
		}
	}
</script>
<style lang="stylus" scoped>
	.detail{
		height: 55rem;
	}
</style>